<template>
  <div>
    <h1>收货地址管理</h1>
        <el-menu
  :default-active="activeIndex2"
  class="el-menu-demo"
  mode="horizontal"
 
  background-color="#545c64"
  text-color="#fff"
  active-text-color="#ffd04b"
  style="display:flex;justify-content:center">
  <!-- <el-menu-item index="1">联系客服</el-menu-item> -->
  <el-menu-item><img src="../img/logo.png" @click="gotoindex()"></el-menu-item>
  <el-menu-item @click="gotoindex()">首页</el-menu-item>
  <el-menu-item index="4" @click="car"><i class="el-icon-shopping-cart-2" ></i>购物车</el-menu-item>
  <el-menu-item index="5" @click="pay">充值中心</el-menu-item>
  <el-menu-item index="6" @click="order">我的订单</el-menu-item>
  <el-menu-item index="7" @click="address">收货地址</el-menu-item>
  <el-menu-item index="8" @click="dposistdetil">个人充值查询</el-menu-item>
  <el-menu-item index="9" @click="myShop">我的</el-menu-item>
</el-menu>
<el-table
    :data="addresslist"
    border
    style="width: 100%">
    <el-table-column
      prop="addPerson"
      label="收货人"
      >
    </el-table-column>
        <el-table-column
      prop="addPhone"
      label="收货人电话"
      >
    </el-table-column>
    <el-table-column
      prop="addProvince"
      label="省"
      >
    </el-table-column>
      <el-table-column
      prop="addCity"
      label="市"
      >
    </el-table-column>
    <el-table-column
      prop="addDistrict"
      label="区"
      >
    </el-table-column>
    <el-table-column
      prop="addDetail"
      label="详细地址"
      >
    </el-table-column>
     <el-table-column
      label="默认地址"
      >
      <template slot-scope="scope">
        <span class="defult" v-if="scope.row.addStatus==0">默认地址</span>
         <span v-else></span>
      </template>
    </el-table-column>
    <el-table-column
      label="操作"
      >
      <template slot-scope="scope">
        <el-button @click="Id(scope.row.addressId)" type="text" size="small">修改用户地址</el-button>
        <el-button type="text" size="small" @click="del(scope.row.addressId)" >删除</el-button>
      </template>
    </el-table-column>
  </el-table>
    <el-button class="b" type="text" @click="back">返回</el-button>
    <el-button class="c" type="text" @click="add">新增收货地址</el-button>
  </div>
</template>
<script>
import{mapMutations} from 'vuex'
  export default {
    data() {
      return {
        addresslist:[],
        userId:'',
        dialogVisible: false,
        activeIndex2:''
      }
    },
       mounted(){
     this.findAll()
     },
     methods: {
        ...mapMutations('address',['setaddresslist']),
        add(){
          this.$router.push("/addGoodsAddress")
        },
          Id(addressId) {
           this.$axios.get("/api/userAddress/findById/" + addressId).then(
         res=>{
             let address = res.data
             this.setaddresslist(address)
             this.$router.push("/updateGoodsAddress")
         }
       )
      },
      del(addressId){
           this.$axios.delete("/api/userAddress/delAddress/" + addressId).then(
         res=>{
           console.log(res.data)
            this.addresslist = res.data
            this.findAll()
         }
       )
      },
      findAll(){
         let jsonUser = sessionStorage.getItem("user")
         console.log(jsonUser)
         let jsonObj=JSON.parse(jsonUser)
         this.userId = jsonObj.userId
        console.log(this.userId)
         this.$axios.get("/api/userAddress/findAddress/" + this.userId).then(
         res=>{
           console.log(res.data)
            this.addresslist = res.data
         }
       )
      },
      back(){
        this.$router.push("/ShopIndex")
      },
      gotoorder(){
      this.$router.push('/addUserOrder')
    },
    gotoindex(){
      this.$router.push('/ShopIndex')
    },
    setSize:function () {
      // 通过浏览器宽度(图片宽度)计算高度
      this.bannerHeight = 400 / 1920 * this.screenWidth;
      },
      order(){this.$router.push('/UserOrder')
      },
       address(){this.$router.push('getGoodsAddress')
      },
      pay(){this.$router.push('/deposit')
      },
      car(){
        this.$router.push('/ShopCar')
      },
      dposistdetil(){
        this.$router.push('/depositDetail')
      },
      gotoGoodsDetail(){
        
        this.$router.push('/ShopIndexDetail')
      },
      addShopCar(){
        this.$router.push('/ShopCar')
      },
      myShop(){
        this.$router.push('/user')
      },
       created(){
         this.findAll()
       }
    }
  }
</script>

<style>
.b{
  margin-left: 800px;
}

.c{
  margin-left: 500px;
}
.people{
  margin: auto;
}
.defult{
  width: 200px;
  color: skyblue;
}
</style>